class FirstTyped extends HTMLElement {
  constructor() {
    super();
    // 创建 Shadow DOM
    this.attachShadow({ mode: 'open' });

    // 初始化数据
    this.strings = JSON.parse(this.getAttribute('strings')) || [];
    this.speed = parseInt(this.getAttribute('speed')) || 100; // 打字速度，单位毫秒
    this.color = this.getAttribute('color') || 'black'; // 默认字体颜色为黑色
    this.fontSize = this.getAttribute('font-size') || '20px'; // 默认字体大小
    this.currentText = ''; // 当前显示的文本
    this.currentIndex = 0; // 当前字符串的索引
    this.currentCharIndex = 0; // 当前字符串的字符索引
    this.interval = null; // 定时器

    // 绑定更新UI的方法
    this.render = this.render.bind(this);
  }

  // 属性变化时更新
  static get observedAttributes() {
    return ['strings', 'speed', 'color', 'font-size'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'strings') {
      this.strings = JSON.parse(newValue);
      this.reset();
      this.startTyping();
    }
    if (name === 'speed') {
      this.speed = parseInt(newValue);
    }
    if (name === 'color') {
      this.color = newValue;
      this.render(); // 更新颜色
    }
    if (name === 'font-size') {
      this.fontSize = newValue;
      this.render(); // 更新字体大小
    }
  }

  // 开始打字
  startTyping() {
    if (this.strings.length === 0) return;
    this.typeString(this.strings[this.currentIndex]);
  }

  // 模拟逐字打字
typeString(str) {
  this.interval = setInterval(() => {
    if (this.currentCharIndex < str.length) {
      this.currentText += str[this.currentCharIndex];
      this.currentCharIndex++;
      this.render();
    } else {
      clearInterval(this.interval); // 打字结束后清除定时器
      setTimeout(() => this.moveToNextString(), 2000); // 添加2秒的停顿
    }
  }, this.speed);
}

// 移动到下一个字符串
moveToNextString() {
  this.currentCharIndex = 0;
  this.currentText = '';
  this.currentIndex++;

  if (this.currentIndex < this.strings.length) {
    this.typeString(this.strings[this.currentIndex]);
  }
}
  // 重置状态
  reset() {
    this.currentText = '';
    this.currentIndex = 0;
    this.currentCharIndex = 0;
  }

  // 渲染组件内容
  render() {
    this.shadowRoot.innerHTML = `
      <style>
       /* 引入 Google Fonts 的字体 Pacifico */
       @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

        span {
          font-size: ${this.fontSize}; /* 使用传入的字体大小 */
          font-family: 'Pacifico', cursive; /* 使用 Pacifico 字体 */
          color: ${this.color}; /* 使用传入的颜色 */
          white-space: nowrap;
          display: inline-block;
          position: relative;
        }

        span::after {
          content: '|'; /* 光标字符 */
          position: absolute;
          right: 0;
          animation: blink 0.8s steps(1) infinite;
        }

        @keyframes blink {
          50% {
            opacity: 0;
          }
        }
      </style>
      <span>${this.currentText}</span>
    `;
  }

  // 初始化组件
  connectedCallback() {
    this.startTyping();
  }

  // 销毁组件时清理
  disconnectedCallback() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }
}

// 注册自定义元素
customElements.define('first-typed', FirstTyped);
// 最终版 封装 解决异步任务
function writeText(text,t, delay = 200) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          text.innerHTML = t; // 显示当前字符串 t
          resolve(); // Promise 完成
      }, delay) // 延迟 delay 毫秒后执行
  })
}

async function main(str,text) {
  while (true) { // 无限循环
      for (let j = 0; j < str.length; j++) {
          // 写入
          for (let i = 0; i <= str[j].length; i++) {
              await writeText(text,str[j].substr(0, i)) // 显示当前字符串的前 i 个字符
          }
          // 回退
          // 回退前先等一秒
          await new Promise((resolve, reject) => {
              setTimeout(() => {
                  resolve(); // 等待 1000 毫秒后 Promise 完成
              }, 1000) // 等待 1000 毫秒
          })
          for (let i = str[j].length; i >= 0; i--) {
              await writeText(text,str[j].substr(0, i), 200) // 显示当前字符串的前 i 个字符，间隔 200 毫秒
          }
      }
  }
}
//main(str,text)